<template>
    <div class="six-main">
        <div class="six-container">
            <div class="item" v-for="(item, index) in dataList" :key="index" :style="{ backgroundImage: `url(${getImgSrc(item.name)})` }">
                <div class="item-text">
                    <div class="value">
                        <span class="title">{{ item.name }}</span>
                        <span class="value-text">
                            <span>{{ item.value }}</span>
                            {{ item.unit }}
                        </span>
                    </div>
                    <div class="data">
                        <div class="data-item">
                            <span class="data-title">{{ item.data[0].title }}：</span>
                            <span class="data-value">{{ item.data[0].value }}{{ item.name != '风' ? item.unit : '' }}</span>
                        </div>
                        <div class="data-item">
                            <span class="data-title">{{ item.data[1].title }}：</span>
                            <span class="data-value"><span>{{ item.data[1].value }}</span>{{ item.name != '风' ? item.unit : '米/秒' }}</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getStationHourData } from '@/api/index'
import moment from 'moment'
import { getWindLevel, getWindDirection} from '@/utils/common'
import temp from '@/assets/images/temp.png'

const weatherData = ref({})

const getImgSrc = (src) => {
  return new URL(`../../../assets/images/weather/${src}.png`, import.meta.url).href
}

const dataList = ref([
    {
        name: '气温',
        unit: '℃',
        value: '',
        data: [
            {
                title: '24小时最高',
                value: ''
            },
            {
                title: '24小时最低',
                value: ''
            }
        ]
    },
    {
        name: '降水',
        unit: 'mm',
        value: '',
        data: [
            {
                title: '1小时降水',
                value: ''
            },
            {
                title: '24小时降水',
                value: ''
            }
        ]
    },
    {
        name: '风',
        unit: '级',
        value: '',
        data: [
            {
                title: '风向',
                value: ''
            },
            {
                title: '当前风速',
                value: ''
            }
        ]
    },
    {
        name: '能见度',
        unit: 'km',
        value: '',
        data: [
            {
                title: '24小时最高',
                value: ''
            },
            {
                title: '24小时最低',
                value: ''
            }
        ]
    },
    {
        name: '湿度',
        unit: '%',
        value: '',
        data: [
            {
                title: '24小时最高',
                value: ''
            },
            {
                title: '24小时最低',
                value: ''
            }
        ]
    },
    {
        name: '气压',
        unit: 'hPa',
        value: '',
        data: [
            {
                title: '24小时最高',
                value: ''
            },
            {
                title: '24小时最低',
                value: ''
            }
        ]
    },
])

onMounted(() => {
    getData()
})

function getData() {
    let time = moment().format('YYYYMMDDHH')
    let minute = moment().format('mm')
    if(minute <= 10) {
        time = moment().subtract(1, 'hours').format('YYYYMMDDHH')
    }
    let params = {
        stationNum: '53698',
        startDateTime: time,
        endDateTime: time
    }
    getStationHourData(params).then(res => {
        let data = res.data.obj[params.stationNum][0]
        weatherData.value = data
        dataList.value[0].value = data.TEM
        dataList.value[0].data[0].value = data.TEM_Max_24h
        dataList.value[0].data[1].value = data.TEM_Min_24h
        dataList.value[1].value = data.PRE_1h
        dataList.value[1].data[0].value = data.PRE_1h
        dataList.value[1].data[1].value = data.PRE_24h
        dataList.value[2].value = getWindLevel(data.WIN_S_Avg_2mi)
        dataList.value[2].data[0].value = getWindDirection(data.WIN_D_Avg_2mi)
        dataList.value[2].data[1].value = data.WIN_S_Avg_10mi
        dataList.value[3].value = data.VIS/1000
        dataList.value[3].data[0].value = data.VIS_HOR_1MI/1000
        dataList.value[3].data[1].value = data.VIS_Min/1000
        dataList.value[4].value = data.RHU
        dataList.value[4].data[0].value = data.RHU
        dataList.value[4].data[1].value = data.RHU_Min
        dataList.value[5].value = data.PRS
        dataList.value[5].data[0].value = data.PRS_Max
        dataList.value[5].data[1].value = data.PRS_Min        
    })
}
defineExpose({ getData })
</script>
<style lang="scss" scoped>
.six-main {
    height: 100%;
    overflow: hidden;
    background: url('@/assets/images/weather/气温背景.png') no-repeat;
    .six-container {
        width: 1163px;
        height: 330px;
        margin-top: 40px;
        margin-left: 40px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .item {
        width: 365px;
        height: 140px;
        display: inline-block;
        margin-bottom: 45px;
        .item-text {
            margin-left: 45%;
            margin-top: 10px;
            .title {
                color: #51F1FF;
                margin-right: 10px;
            }
            .value {
                .value-text {
                    color: #FFCC00;
                    span {
                        font-size: 35px;
                        font-weight: 600;
                    }
                }
                margin-bottom: 10px;
            }
            .data {
                .data-item {
                    color: #51F1FF;
                    margin-bottom: 5px;
                }
            }
        }
    }
}
</style>